<script setup lang="ts">
import { ref } from "vue"
import { Form, FormItem, Input, Select } from "@purchasing/components"

const params = ref({ keyword: "", option: "" })

const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
]
</script>

<template>
  <div class="pc-flex pc-flex-col pc-gap-8 pc-p-8">
    <div>水平布局</div>
    <div class="pc-border p-4">
      <Form layout="horizontal">
        <FormItem label="关键字">
          <Input v-model="params.keyword" />
        </FormItem>
        <FormItem label="选项">
          <Select v-model="params.option" :options="options"></Select>
        </FormItem>
      </Form>
    </div>
    <div>垂直布局</div>
    <div class="pc-border pc-p-4">
      <Form layout="vertical">
        <FormItem label="关键字">
          <Input v-model="params.keyword" />
        </FormItem>
        <FormItem label="选项">
          <Select v-model="params.option" :options="options"></Select>
        </FormItem>
      </Form>
    </div>
    <div>行内布局</div>
    <div class="pc-border pc-p-4">
      <Form layout="inline">
        <FormItem label="关键字">
          <Input v-model="params.keyword" />
        </FormItem>
        <FormItem label="选项">
          <Select v-model="params.option" :options="options"></Select>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
